<template>
  <layout :showBg="false">
    <template #header>
      <view class="page-head flex flex-a-c">
        <image
            src="../../../assets/images/icons/arrow-right.png"
            class="arrow-left back"
            style="width:48rpx;height: 48rpx;opacity: 0.9;"
            mode="scaleToFill"
            @click="back"
        />
        <text class="fs-36 bold">个人信息</text>
      </view>
    </template>
    <view class="content">
      <!-- 头像 -->
      <view class="setting-item flex flex-bt" @click="showPic=true">
        <view class="flex flex-a">
          <text class="fs-28 c-90">头像</text>
        </view>
        <view class="flex flex-a">
          <image
            :src="userInfo.avatar"
            style="width: 80rpx; height: 80rpx"
            mode="scaleToFill"
          />
          <image
            src="../../../assets/images/icons/arrow-right.png"
            style="width: 32rpx; height: 32rpx"
            mode="scaleToFill"
            class="right-icon"
          />
        </view>
      </view>
      <!-- 昵称 -->
      <view @click="jump('/pages/mine/setting/changeNickname')" class="setting-item flex flex-bt">
        <view class="flex flex-a">
          <text class="fs-28 c-90">昵称</text>
        </view>
        <view class="flex flex-a">
          <text class="fs-28 c-60">{{ userInfo.nickName }}</text>
          <image
            src="../../../assets/images/icons/arrow-right.png"
            style="width: 32rpx; height: 32rpx"
            mode="scaleToFill"
            class="right-icon"
          />
        </view>
      </view>
      <!-- id -->
      <view class="setting-item flex flex-bt">
        <view class="flex flex-a">
          <text class="fs-28 c-90">ID</text>
        </view>
        <view class="flex flex-a">
          <image
            src="../../../assets/images/setting/copy.png"
            style="width: 32rpx; height: 32rpx; margin-right: 16rpx"
            mode="scaleToFill"
            @click="copyText(userInfo.userId)"
          />
          <text class="fs-28 c-60">{{ userInfo.userId }}</text>
        </view>
      </view>
      <!-- 邀请码 -->
      <view class="setting-item flex flex-bt">
        <view class="flex flex-a">
          <text class="fs-28 c-90">邀请码</text>
        </view>
        <view class="flex flex-a">
          <image
            src="../../../assets/images/setting/copy.png"
            style="width: 32rpx; height: 32rpx; margin-right: 16rpx"
            mode="scaleToFill"
            @click="copyText(userInfo.inviteCode)"
          />
          <text class="fs-28 c-60">{{ userInfo.inviteCode }}</text>
        </view>
      </view>
    </view>
    <u-popup round="32rpx" :show="showPic" @close="showPic=false">
        <view class="f-content">
            <view @click="choosePic('camera')" class="f-item flex flex-a-c c-90 fs-32">拍照</view>
            <view @click="choosePic('album')" class="f-item flex flex-a-c c-90 fs-32">相册选择</view>
            <view @click="onPreview" class="f-item flex flex-a-c c-90 fs-32 preview">查看头像</view>
            <view class="f-item flex flex-a-c c-60 fs-32" @click="showPic=false">取消</view>
        </view>
    </u-popup>
  </layout>
</template>
<script>
import layout from "../../../compennts/layout/index.vue";
import { getLocalUserInfo } from "../../../assets/utils/index";
import { copyText } from "../../../assets/utils";
export default {
  components: {
    layout,
  },
  data() {
    return {
      userInfo: {},
    showPic:false
    };
  },
  onShow() {
    this.userInfo = getLocalUserInfo();
  },
  onLoad() {},
  methods: {
    copyText,
    back() {
      uni.navigateBack();
    },
    jump(path){
      uni.navigateTo({
         url: path
      });
    },
    onPreview(){
        uni.previewImage({
			urls: [this.userInfo.avatar],
		});
    },
    choosePic(type) {
      uni.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"],
        sourceType: [type],
        success: async (res) => {
          console.log(res)
          console.log(File)
        //   this.handleUpload(res);
        },
        fail: (res) => {
          console.log(res);
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../assets/styles/common");

.content {
  background: #f7f8ff;
  padding: 32rpx;
  min-height: 100%;
  .setting-item {
    background: #fff;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
    padding: 32rpx;
    height: 112rpx;
    .icon {
      width: 48rpx;
      height: 48rpx;
      margin-right: 16rpx;
    }
    .right-icon {
      font-weight: bold;
      margin-left: 16rpx;
    }
  }
}
.f-content{
    .f-item{
        height: 112rpx;
        text-align: center;
        border-bottom: 1px solid #F1F1F1;
        &:nth-child(1){
            border-radius: 32px 32px 0px 0px;
        }
    }
    .preview{
        border-bottom: 8rpx solid #F1F1F1;
    }
}
</style>
